<!-- ALL-设备巡检-巡检规则 -->
<template>
  <div>
    <div class="equip-wrap-common equip-inspect-rule-list-page">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="5">
            <px-form-item label="规则名称">
              <px-input
                v-model="queryParams.ruleCodeOrName"
                placeholder="请输入规则名称/编号"
                autocomplete="off"
                maxlength="50"
                clearable
                @blur="queryParams.checkRuleName = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
          </px-col>
          <px-col :span="5">
            <px-form-item label="巡检类型">
              <px-select v-model="queryParams.inspectType" placeholder="请选择巡检类型" clearable filterable>
                <px-option v-for="item in inspectTypeList" :key="item.id" :label="item.label" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="更新人">
              <px-select-v2
                v-model="queryParams.updateBy"
                style="width: 100%"
                filterable
                clearable
                :options="approvalList"
                placeholder="请选择更新人"
              />
            </px-form-item>
          </px-col>
          <px-col :span="4">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <div class="equip-table-btn">
        <px-button v-has="'ALL_EQUIP_INSPECT_RULE_ADD_PAGE'" style="margin-right: 8px" type="primary" @click="handleAdd">新增巡检规则</px-button>
      </div>
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 303px)" border>
        <px-table-column label="序号" min-width="50" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template v-if="item.prop === 'ruleCode'" #default="scope">
            <span
              v-if="isHasPermission('ALL_EQUIP_INSPECT_RULE_DETAIL_PAGE')"
              style="color: #3b82f6; cursor: pointer"
              @click="handleView(scope.row)"
              >{{ scope.row.ruleCode }}</span
            >
            <span v-else>{{ scope.row.ruleCode }}</span>
          </template>
          <template v-else #default="scope">
            <span>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" min-width="180" align="center">
          <template #default="scope">
            <px-tooltip append-to=".equip-inspect-rule-list-page" content="详情" placement="top">
              <px-button v-has="'ALL_EQUIP_INSPECT_RULE_DETAIL_PAGE'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
            <px-tooltip append-to=".equip-inspect-rule-list-page" content="编辑" placement="top">
              <px-button v-has="'ALL_EQUIP_INSPECT_RULE_EDIT_PAGE'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <px-tooltip append-to=".equip-inspect-rule-list-page" content="复制" placement="top">
              <px-button v-has="'ALL_EQUIP_INSPECT_RULE_COPY_PAGE'" link type="primary" icon="CopyDocument" @click="handleCopy(scope.row)" />
            </px-tooltip>
            <px-tooltip append-to=".equip-inspect-rule-list-page" content="删除" placement="top">
              <px-button v-has="'ALL_EQUIP_INSPECT_RULE_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_INSPECT_RULE"
});
import { queryPage } from "@/api/equip/inspectRule";
import { isHasPermission } from "@/utils/auth";
import { stringTrimOfParams } from "@/utils/common";
import { getEmployeeIdAndName } from "@/utils/pengxi";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
// import { useAuth } from "@/views/all/equip/inspect/hooks";
import { onActivated, onMounted, reactive, toRefs } from "vue";
import { onBeforeRouteLeave } from "vue-router";
import { INSPECT_CONTENT, INSPECT_TYPE } from "../config";
import { useAction } from "./hooks";

// 离开本模块强制更新数据
onBeforeRouteLeave(to => {
  if (!to?.path?.includes("/all/equip/inspect/rule/")) {
    resetTable();
  }
});

// const { isUpdator } = useAuth();
// const showButton = data => {
//   const flag = isUpdator(data);
//   return flag;
// };
const actions = useAction();
const state = reactive<any>({
  isMain: true, // 主页面true 详情页面false
  isView: true, // 查看true 新增/编辑false
  systemList: [], // 系统下拉框
  categoryList: [], // 设备总称下拉框
  positionCodesList: [], // 基础信息巡检区域列表
  queryParams: {
    ruleCodeOrName: "",
    className: "",
    pageNum: 1,
    pageSize: 20
  },
  total: 0,
  tableColumns: [
    { prop: "ruleCode", label: "编号", minWidth: "180", showOverflowTooltip: true, fixed: "left", checkRuleNo: true },
    { prop: "ruleName", label: "巡检规则名称", minWidth: "180", showOverflowTooltip: true },
    { prop: "inspectTypeDesc", label: "巡检类型", minWidth: "140", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "140", showOverflowTooltip: true },
    { prop: "inspectAreaDesc", label: "巡检区域", minWidth: "140", showOverflowTooltip: true },
    { prop: "updateName", label: "更新人", minWidth: "180", showOverflowTooltip: true },
    { prop: "updateTime", label: "更新时间", minWidth: "180", showOverflowTooltip: true }
  ],
  checkTargetList: INSPECT_CONTENT, // 基础信息巡检内容列表
  tableData: [],
  detailPageType: "add",
  checkRuleNo: "",
  approvalList: [], //更新人
  inspectTypeList: INSPECT_TYPE // 基础信息巡检类型列表
});
const { inspectTypeList, queryParams, tableColumns, tableData, total, approvalList } = toRefs(state);

// 进入页面时触发
onMounted(async () => {
  approvalList.value = await getEmployeeIdAndName();
  queryTable();
});
// 缓存页面激活时触发
onActivated(() => {
  queryTable();
});

// 查询巡检清单
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const data = await queryPage(stringTrimOfParams(params));
  tableData.value = data?.data;
  total.value = data?.total;
};
// 重置筛选条件和巡检清单
const resetTable = async () => {
  queryParams.value = {
    ruleCodeOrName: "",
    className: "",
    pageNum: 1,
    pageSize: 20
  };
  queryTable();
};
// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
};
// 查看
const handleView = (row: any) => {
  actions.view(row);
};
// 添加
const handleAdd = () => {
  actions.add();
};
// 编辑
const handleEdit = (row: any) => {
  actions.edit(row);
};
// 复制巡检
const handleCopy = (row: any) => {
  actions.copy(row);
};
// 删除
const handleDelete = (row: any) => {
  actions.delete(row, queryTable);
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
